<template>
  <van-overlay :show="show" @click="show = false" :lock-scroll="false">
    <div class="popup-content">
      <div
        class="popup-main rule-box"
        :style="{ backgroundImage: `url(${bgPic})` }"
        v-html="rule"
      ></div>
    </div>
  </van-overlay>
</template>

<script>
import { ref } from 'vue';
import { Overlay } from 'vant';

export default {
  data() {
    return {
      bgPic: require('@/assets/logo.png')
    };
  },
  setup() {
    let show = ref(false);
    let rule = ref('');

    const showBox = (val) => {
      rule.value = val;
      show.value = true;
    };
    // const hideBox = () => {
    //   show.value = false;
    // };
    return {
      showBox,
      rule,
      show
    };
  },
  components: {
    [Overlay.name]: Overlay
  }
};
</script>
<style lang="scss">
.rule-box {
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  pointer-events: all;
  width: 100%;
  height: 100%;
  background-size: 100%;
  padding: 220px 80px;
  font-size: 26px;
  overflow: scroll;
  background: #ccc;
}
</style>
